一、相关概念

参考资料

• 官网

  CesiumJS – Cesium

二、Cesium的使用

1.在webpack中使用Cesium

相关插件

• resium 基于Cesium 封装的前端GIS三维可视化框架

  官网

  github链接

*在webpack中使用resium 该库, 需要对webpack配置做出相关修改, 具体信息参考resium github链接

module.exports = {
  externals: {
    cesium: "Cesium",
  },
  target: process.env.NODE_ENV === "development" ? "web" : "browserslist",
  module: {
    rules: [
      // {
      //   // 编译前通过eslint检查代码 (注释掉即可取消eslint检测)
      //   test: /\.(ts|tsx|js|jsx)?$/,
      //   enforce: "pre",
      //   use: ["source-map-loader", "eslint-loader"],
      //   include: path.resolve(__dirname, "src"),
      // },
      {
        // .tsx用typescript-loader解析解析
        test: /\.(ts|tsx|js|jsx)?$/,
        use: [
          {
            loader: "ts-loader",
            options: {
              getCustomTransformers: () => ({
                before: [
                  tsImportPluginFactory({
                    libraryName: "antd",
                    libraryDirectory: "lib",
                    style: true,
                  }),
                ],
              }),
            },
          },
        ],
        include: path.resolve(__dirname, "src"),
      },
      {
        // 文件解析
        test: /\.(eot|woff|otf|svg|ttf|woff2|appcache|mp3|mp4|pdf)(\?|$)/,
        include: path.resolve(__dirname, "src"),
        use: [
          {
            loader: "file-loader",
            options: {
              name: "assets/[name].[hash:4].[ext]",
            },
          },
        ],
      },
      {
        // 图片解析
        test: /\.(png|jpg|jpeg|gif)$/i,
        include: path.resolve(__dirname, "src"),
        use: [
          {
            loader: "url-loader",
            options: {
              limit: 8192,
              name: "assets/[name].[hash:4].[ext]",
            },
          },
        ],
      },
      {
        // wasm文件解析
        test: /\.wasm$/,
        include: path.resolve(__dirname, "src"),
        type: "webassembly/experimental",
      },
      {
        // xml文件解析
        test: /\.xml$/,
        include: path.resolve(__dirname, "src"),
        use: ["xml-loader"],
      },
    ],
  },
  plugins: [
    new AntdDayjsWebpackPlugin(),
    // 拷贝public中的文件到最终打包文件夹里
    new CopyPlugin({
      patterns: [
        {
          from: "public/**/*",
          to: "./",
          globOptions: {
            ignore: ["**/icon.svg", "**/index.html"],
          },
          noErrorOnMissing: true,
        },
        {
          from: "node_modules/cesium/Build/Cesium",
          to: "cesium",
        },
      ],
    }),
    new webpack.DefinePlugin({
      CESIUM_BASE_URL: JSON.stringify("/cesium"),
    }),
    new HtmlTagsPlugin({
      append: false,
      tags: ["cesium/Widgets/widgets.css", "cesium/Cesium.js"],
    }),
    new HtmlTagsPlugin({
      append: false,
      usePublicPath: false,
      scripts: [JSON.parse(config[env].env).UM_TOKEN_SDK]
    }),
  ],
  resolve: {
    extensions: [".js", ".jsx", ".ts", ".tsx", ".less", ".css", ".wasm"], // 后缀名自动补全
    alias: {
      "@": path.resolve(__dirname, "src"),
    },
    fallback: {
      "react/jsx-runtime": "react/jsx-runtime.js",
      "react/jsx-dev-runtime": "react/jsx-dev-runtime.js",
    },
  },
};

1-1.使用resium加载3dtiles模型数据

注意事项

• 需要在Cesium 官网申请AccessToken, 方可进行后续开发
• 本个demo 所用的组件版本为：
  • react 17.0.1
  • resium 1.14.3
  • cesium 1.86.1
  • webpack 5.52.0

import React, { FC, useEffect, useRef } from "react";
import { Cartesian3, Color, Entity, Viewer as CesiumViewer, Ion, Cesium3DTileFeature, Cesium3DTileStyle } from "cesium";
import { Viewer, Cesium3DTileset, CesiumComponentRef, CesiumMovementEvent, RootEventTarget } from "resium";

Ion.defaultAccessToken = "在cesium 官网申请的AccessToken"; // 需要替换此AccessToken

function Demo3Dtiles() {
	// 3Dtiles 的文件请求路径
	// const tilesetUrl = 'http://10.52.48.250:9090/iron_bag/tileset.json';
	// const tilesetUrl = 'http://10.52.48.250:9090/c1c2/tileset.json';
	const tilesetUrl = "http://xiaomaike.space:6089/floor/tileset.json";

	const ref = useRef<CesiumComponentRef<CesiumViewer>>(null);

	const handleReady = (tileset: any) => {
		const cesiumElement = ref.current?.cesiumElement;
		if (cesiumElement) {
			cesiumElement.zoomTo(tileset);

			cesiumElement.scene.debugShowFramesPerSecond = true; // 显示帧率

			cesiumElement.scene.globe.show = false;
			cesiumElement.scene.skyBox.show = false; //关闭天空盒，否则会显示天空颜色
			//背景透明
			cesiumElement.scene.backgroundColor = new Color(0.0, 0.0, 0.0, 0.5);

			// // 隐藏下方Cesium logo
			cesiumElement.cesiumWidget.creditContainer.remove();
			console.log("viewr", cesiumElement);

			// cesiumElement.timeline.container.remove();
			// cesiumElement.homeButton.container.remove();
			// cesiumElement.animation.container.remove();
		}
	};

	// useEffect(() => {
	// 	if(ref.current?.cesiumElement){

	// 	}
	// }, [ref])

	const handleClick = (movement: CesiumMovementEvent, target: Cesium3DTileFeature) => {
		console.log("movement: ", movement);
		console.log("target: ", target);
	};

	return (
		<Viewer
			full
			ref={ref}
			homeButton={false}
			geocoder={false}
			navigationHelpButton={false}
			baseLayerPicker={false}
			sceneModePicker={false}
			timeline={false}
			animation={false}
			infoBox={false}
			// onClick={handleClick}
		>
			<Cesium3DTileset
				url={tilesetUrl}
				onReady={handleReady}
				onClick={handleClick}
				// style={
				// 	new Cesium3DTileStyle({
				// 		color: {
				// 			conditions: [["true", "color('red')"]],
				// 		},
				// 	})
				// }
			/>
		</Viewer>
	);
}

export default Demo3Dtiles;